<template>
  <el-dialog
    title="添加新代理"
    :visible.sync="visible"
    width="500px"
    :before-close="
      () => {
        $emit('close');
      }
    "
  >
    <el-form
      size="small"
      :rules="rules"
      :model="form"
      ref="agentForm"
      label-width="90px"
    >
      <el-form-item label="搜索用户" prop="user_id">
        <el-autocomplete
          style="width:200px;"
          v-model="form.nickname"
          :fetch-suggestions="querySearchAsync"
          value-key="nickname"
          value="id"
          placeholder="请输入用户名称"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="真实姓名" prop="real_name">
        <el-input v-model="form.real_name"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="id_number">
        <el-input
          :minlength="18"
          :maxlength="18"
          v-model="form.id_number"
        ></el-input>
      </el-form-item>
      <el-form-item label="代理类别" prop="agent_type">
        <el-radio v-model="form.agent_type" label="1">社区代理</el-radio>
        <el-radio v-model="form.agent_type" label="2">区县代理</el-radio>
      </el-form-item>
      <el-form-item label="城市" prop="district">
        <el-cascader
          expand-trigger="hover"
          :options="cityList"
          v-model="form.district"
          value="cityid"
          @change=""
          :props="{
            value: 'v',
            label: 'n',
            children: 'c'
          }"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label="街道/乡镇" prop="street">
        <el-input
          placeholder="限30个字"
          :maxlength="30"
          v-model="form.street"
        ></el-input>
      </el-form-item>
      <el-form-item label="付款凭证" prop="style">
        <el-upload
          action="https://wx.chengkenet.com/api/common/upload/"
          :headers="{
            Authorization: `Bearer ${getToken()}`
          }"
          list-type="picture-card"
          :on-remove="coverRemove"
          :on-success="coverUpload"
          :file-list="form.style"
          :limit="1"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="$emit('close')">取 消</el-button>
      <el-button type="primary" @click="submit">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getAgentAvailableUser, addAgentUser } from "@/api/agent-mng";
import { getToken } from "@/utils/auth";
import city from "@/utils/citys.js";
export default {
  props: ["visible"],
  data() {
    var checkImg = (rule, value, callback) => {
      if (value.length === 0) {
        callback(new Error("请上传图片"));
      } else {
        callback();
      }
    };
    return {
      form: {
        nickname: null,
        user_id: null,
        real_name: null,
        id_number: null,
        agent_type: "1",
        style: [],
        district: null,
        street: null
      },
      rules: {
        real_name: [
          { required: true, message: "请输入真实姓名", trigger: "blur" }
        ],
        id_number: [
          { required: true, message: "请输入身份证号", trigger: "blur" }
        ],
        street: [
          { required: true, message: "请输入街道乡镇", trigger: "blur" }
        ],
        id_number: [
          { required: true, message: "请输入身份证号", trigger: "blur" }
        ],
        district: [{ required: true, message: "请选择省市区", trigger: "blur" }]
        // style: [{ validator: checkImg, trigger: "blur" }]
      },
      parentList: [],
      cityList: city
    };
  },
  watch: {
    visible: function(val) {
      if (val) {
      } else {
        this.$refs["agentForm"].resetFields();
        this.form.nickname = null;
      }
    }
  },
  methods: {
    querySearchAsync(string, cb) {
      getAgentAvailableUser({
        page: 1,
        condition: string ? string : null,
        level: 0
      }).then(res => {
        if (res.code === 200) {
          if (res.data.length === 0) this.form.user_id = null;
          cb(res.data);
        }
      });
    },
    handleSelect(item) {
      console.log(item);
      this.form.user_id = item.id;
    },
    submit() {
      this.$refs["agentForm"].validate(valid => {
        if (valid) {
          addAgentUser({
            user_id: this.form.user_id,
            realname: this.form.real_name,
            identity: this.form.id_number,
            province: this.form.district[0],
            city: this.form.district[1],
            prefecture: this.form.district[2],
            voucher: this.form.style[0] ? this.form.style[0].url : undefined,
            street: this.form.street,
            agent: this.form.agent_type
          }).then(res => {
            if (res.code === 200) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$emit("close");
            }
          });
        }
      });
    },
    coverUpload(response, file, fileList) {
      this.form.style.push({ name: "", url: response.data.file });
    },
    coverRemove(file, fileList) {
      this.form.style.forEach((item, index) => {
        if (item.uid === file.uid) {
          this.form.style.splice(index, 1);
          return;
        }
      });
    },
    getToken() {
      return getToken();
    }
  },
  created() {}
};
</script>

<style></style>
